<template>
  <page-wrap back hide-tab title="职位收藏" stayStill class="page">
    <view class="position-list">
      <view class="hp-filter-wrap">
        <view
          :class="['hp-filter', { fixed: filterFixed }]"
          :style="'top:' + navHeight + 'px;'"
        >
          <view class="filter-post">
            <view class="post-list">
              <text
                :class="['post-item', { active: activeAim == item.idx }]"
                v-for="item in aimList"
                :key="item.idx"
                @click="handleAimClick(item.idx)"
                >{{ item.zwname || item.label }}</text
              >
            </view>
          </view>
        </view>
      </view>

      <view v-if="activeAim == 0">
        <JobItemR
          v-for="item in positionList"
          :key="item.id"
          :item="item"
          :props="props"
          @itemClick="handleItem"
        />
      </view>
      <view v-else>
        <!-- <EnterprisesItem v-for="item in positionList" :key="item.id" :item="item" :props="infoItemprops" @itemClick="handleCompanyJobItemClick" /> -->
        <EnterprisesItem
          v-for="item in positionList"
          :key="item.id"
          :item="item"
          :props="infoItemprops"
          @itemClick="handleCompanyJobItemClick"
        />
        <!-- <view v-for="item in positionList" :key="item.id">
          {{ JSON.stringify(item) }}
        </view> -->
      </view>
      <u-empty
        v-if="showEmpty"
        :text="activeAim == 0 ? '职位关注为空' : '暂无数据'"
        mode="list"
      ></u-empty>
      <u-loadmore
        v-else
        class="position-more"
        :status="status"
        :load-text="loadText"
      />
    </view>
  </page-wrap>
</template>

<script>
import { getPFavoriteList } from "@/api/index";
import { getCompanyJobFavoriteList } from "@/api/modules/enterprises";
import JobItemR from "@/components/JobItemR";
import ShareMixin from "@/mixins/share";
import EnterprisesItem from "./components/EnterprisesItem.vue";

export default {
  mixins: [ShareMixin],
  components: {
    JobItemR,
    EnterprisesItem,
  },
  data() {
    return {
      personId: uni.getStorageSync("person-id").slice(2) || undefined,
      page: 0,
      size: 10,
      positionList: [],
      showEmpty: false,
      status: "loadmore",
      loadText: {
        loadmore: "加载更多",
        loading: "加载中",
        nomore: "没有更多了",
      },
      customStyle: {
        border: "none",
        backgroundColor: "#E9ECEF",
      },
      total: 0,
      props: {
        title: "jtzw",
        salary: "xzdy",
        cname: "cname",
        time: "time",
        region: "region",
        fldy: "fldy",
        gznum: "gznum",
        edus: "edus",
        jobtypes: "jobtypes",
        yuangong: "yuangong",
        logo: "logo",
        valid: "zptype",
      },
      sharePath: "/pagesSub/userCenter/positonCollection/index",

      infoItemprops: {
        title: "oriPositionName",
        summaryPositionDemand: "summaryPositionDemand",
        summarySkillsRequired: "summarySkillsRequired",
        site: "workPlace",
        companyInfo: "company",
        companyName: "shortName", // company.shortName
        name: "name",
        jobType: "jobType",
        pic: "logoUrl", // company.logoUrl
        date: "publishTime",
        id: "id",
      },
      navHeight: 0,
      filterFixed: false,
      activeAim: 0,
      aimList: [
        {
          zwname: "",
          label: "平台职位",
          idx: 0,
        },
        {
          zwname: "",
          label: "名企岗位",
          idx: 1,
        },
      ],
    };
  },
  created() {
    this.navHeight = getApp().globalData.navHeight;
    this.getPositionList();
    uni.setStorageSync("operateCollect", "0");
  },

  onShow() {
    if (this.activeAim == 1) {
      const operateCollect = uni.getStorageSync("operateCollect") || "0";
      if (operateCollect== "1") {
        this.handleAimClick(1);
        uni.setStorageSync("operateCollect", "0");
      }
    }
  },
  onReachBottom() {
    this.page = this.page + 1;
    if (this.activeAim == 0) {
      this.getPositionList();
    } else {
      this.getCompanyPositionList();
    }
  },
  methods: {
    handleAimClick(index) {
      this.status = "loadmore";
      this.activeAim = index;
      this.positionList = [];
      this.showEmpty = false;
      if (index == 0) {
        this.page = 0;
        this.getPositionList();
      } else {
        this.page = 1;
        this.getCompanyPositionList();
      }
    },

    getPositionList() {
      if (this.status == "loading") return;
      this.status = "loading";
      let params = {
        person_id: this.personId,
        page_index: this.page,
        page_size: this.size,
      };
      getPFavoriteList(params).then((res) => {
        this.status = "nomore";
        if (res.data.code == 2) {
          this.showEmpty = true;
        } else if (res.data && res.data.length) {
          this.showEmpty = false;
          this.total = res.pageparam.sums;
          if (this.positionList.length >= this.total) {
            return;
          }
          let data = res.data.map((item) => {
            if (item.fldy) {
              item.fldy = item.fldy.slice(0, 3);
            }
            return item;
          });
          this.positionList.push(...data);
        }
      });
    },

    getCompanyPositionList() {
      if (this.status == "loading") return;
      this.status = "loading";
      let params = {
        personId: this.personId,
        pageNo: this.page,
        pageSize: this.size,
      };
      getCompanyJobFavoriteList(params).then((res) => {
        this.status = "nomore";
        if (res.code == 200) {
          if (res.data && res.data.length) {
            this.showEmpty = false;
            this.total = res.pageparam.sums;
            if (this.positionList.length >= this.total) {
              return;
            }
            this.positionList.push(...res.data);
          }
        } else {
          this.showEmpty = true;
        }
      });
    },

    handleItem(item) {
      uni.navigateTo({
        url: "/pagesSub/public/jobDetail/index?jobId=" + item.id,
      });
    },
    handleCompanyJobItemClick(item) {
      uni.navigateTo({
        url:
          "/pagesSub/enterprises/detail/index?jobId=" +
          item.id +
          "&oriPositionName=" +
          item.oriPositionName,
      });
    },
  },
};
</script>

<style lang="scss">
$img-base-collection: $img-base + "collection/";
@include img-base-self(
  ".position-info.education::before",
  "collection/education.png"
);
@include img-base-self(
  ".position-info.experience::before",
  "collection/experience.png"
);
@include img-base-self(
  ".position-info.address::before",
  "collection/address.png"
);

.position-list {
  // margin: 32rpx 32rpx 24rpx;

  &-item {
    padding: 32rpx;
    background-color: $uni-bg-color;
    border-radius: $uni-border-radius-big;
    margin-bottom: $uni-spacing-col-lg;
  }

  .position-info {
    margin-right: 20rpx;

    &::before {
      content: "";
      display: inline-block;
      margin-right: 8rpx;
      margin-bottom: -2rpx;
      width: 24rpx;
      height: 24rpx;
      background-size: 100% 100%;
    }
  }
}

.hp-filter-wrap {
  // height: 208rpx;

  .hp-filter {
    &.fixed {
      position: fixed;
      left: 0;
      top: 0;
      z-index: 10;
      width: 100%;
      background: $uni-bg-color-grey;
    }

    .filter-post {
      display: flex;
      align-items: center;
      padding: 16rpx 32rpx 14rpx 32rpx;
      margin-bottom: $uni-spacing-col-lg;
      background-color: #fff;

      .post-list {
        flex-grow: 1;
        display: flex;
        justify-content: space-around;
        align-items: center;
        overflow: auto;

        .post-item {
          margin-left: 16rpx;
          padding: 16rpx;
          font-size: $uni-font-size-base;
          white-space: nowrap;

          &:first-of-type {
            margin-left: 0;
          }

          &.active {
            position: relative;
            font-size: 34rpx;
            font-weight: bold;
            &::after {
              display: inline-block;
              position: absolute;
              bottom: 0;
              left: 50%;
              transform: translateX(-50%);
              content: "";
              width: 56rpx;
              height: 14rpx;
              background-image: url($img-base + "select.png");
              background-repeat: no-repeat;
              background-size: 100% 100%;
            }
          }
        }
      }

      .add {
        flex-shrink: 0;
        width: 110rpx;
        text-align: center;
        font-size: $uni-font-size-min;
        color: $uni-text-color-666;
        &-icon {
          width: 28rpx;
          height: 28rpx;
          margin-bottom: 6rpx;
          background-image: url($img-base + "home/icon-add.png");
          background-size: 100% 100%;
        }
      }
    }
  }
}
</style>
